<template>
  <h1>Switch 开关</h1>
  <p>表示两种相互对立的状态间的切换，多用于触发「开/关」。</p>
  <h2>基础用法</h2>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-switch v-model="value1"></az-switch>
        <p>值：{{ value1 }}</p>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example1 }}</code></pre>
    </div>
  </div>
  <h2>禁用</h2>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-switch v-model="value2_1" disabled></az-switch>
        <az-switch v-model="value2_2" disabled></az-switch>
        <p>值：{{ value2_1 }}</p>
        <p>值：{{ value2_2 }}</p>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example2 }}</code></pre>
    </div>
  </div>
  <h2>提示文字</h2>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-switch v-model="value3" active-text="是" inactive-text="否"></az-switch>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example3 }}</code></pre>
    </div>
  </div>
  <h2>开关颜色</h2>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-switch v-model="value4" style="--az-switch-active-color:#13ce66; 
          --az-switch-inactive-color:#ff4949"></az-switch>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example4 }}</code></pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref(false)
const value2_1 = ref(true)
const value2_2 = ref(false)
const value3 = ref(false)
const value4 = ref(false)
const example1 = `<az-switch v-model="value1"></az-switch>`
const example2 = `<az-switch v-model="value2" disabled></az-switch>
<az-switch v-model="value3" disabled></az-switch>`
const example3 = `<az-switch v-model="value3" active-text="是" inactive-text="否"></az-switch>`
const example4 = `<az-switch v-model="value4" style="--az-switch-active-color:#13ce66; 
  --az-switch-inactive-color:#ff4949">
</az-switch>`
</script>
